var pathName = window.document.location.pathname;
var projectName = pathName.substring(0, pathName.substr(1).indexOf("/") + 1);

function fnW(str) {
    var num;
    str >= 10 ? num = str : num = "0" + str;
    return num;
}

//实时得分榜单
var game_billboard =echarts.init(document.getElementById("game_billboard"),'infographic');

var billboardOption = {
    title: {
        text: '实时榜单 前20名'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {},
    grid: {
        left: '0%',
        right: '0%',
        bottom: '5%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
            show: true,
            textStyle: {
                color: '#ffd639',
                fontSize: 12
            }
        },
    },
    yAxis: {
        type: 'category',
        inverse: true,
        data: ['张三', '李四', '王五', '赵六', '孙七', '周八','吴九', '郑十'],
        axisLabel: {
            interval: 0,
            color: '#D8D9D9',
            margin: 90,
            formatter: (params, index) => {
                if (index < 9) {
                    return [`{a${index + 1}|  ${index + 1}}    ${params}`].join('\n')
                }else{
                    return [`{a${index + 1}|${index + 1}}    ${params}`].join('\n')
                }
            },
            align: 'left', // 文字左排序
            rich: {
                a1: {
                    color: '#fff',
                    backgroundColor: '#ff4a45',
                    align: 'center',
                    borderRadius: 4,
                },
                a2: {
                    color: '#fff',
                    backgroundColor: '#ffa139',
                    align: 'center',
                    borderRadius: 4,
                },
                a3: {
                    color: '#fff',
                    backgroundColor: '#deff23',
                    align: 'center',
                    borderRadius: 4,
                },
                a4: {
                    color: '#fff',
                    backgroundColor: '#ffd639',
                    align: 'center',
                    borderRadius: 4,
                },
                a5: {
                    color: '#fff',
                    backgroundColor: '#ffd639',
                    align: 'center',
                    borderRadius: 4,
                },
                a6: {
                    color: '#fff',
                    backgroundColor: '#a5a5a5',
                    align: 'center',
                    borderRadius: 4,
                },
                a7: {
                    color: '#fff',
                    backgroundColor: '#a5a5a5',
                    align: 'center',
                    borderRadius: 4,
                },
                a8: {
                    color: '#fff',
                    backgroundColor: '#a5a5a5',
                    align: 'center',
                    borderRadius: 4,
                },
                a9: {
                    color: '#fff',
                    backgroundColor: '#a5a5a5',
                    align: 'center',
                    borderRadius: 4,
                },
                a10: {
                    color: '#fff',
                    backgroundColor: '#a5a5a5',
                    align: 'center',
                    borderRadius: 4,
                },
                title: {
                    color: "#fff",
                    width: 15,
                    align: "left"
                }
            }
        }
    },
    series: [
        {
            name: '得分',
            type: 'bar',
            data: [100, 100, 100, 100, 100, 100, 100, 100]
        }
    ]
};
game_billboard.setOption(billboardOption);

//参赛人员分布
var pie_fanzui =echarts.init(document.getElementById("pie_fanzui"),'infographic');
var fanzuioption = {
    title : {
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['公司','零售','运营'],
        textStyle: {color: '#fff'}
    },
    
	label: {
	     normal: {
	          textStyle: {
	                color: 'red'  // 改变标示文字的颜色
	          }
	     }
	},
    series : [
        {
            name: '参赛人员分布',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:300, name:'公司'},
                {value:300, name:'零售'},
                {value:300, name:'运营'}
            ],
          
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
pie_fanzui.setOption(fanzuioption);


//===================完成率=======================
var completion_rate =echarts.init(document.getElementById("completion_rate"),'macarons');
var completionrateOption = {
    series: [
        {
            type: 'gauge',
            progress: {
                show: true,
                width: 10
            },
            axisLine: {
                lineStyle: {
                    width: 10
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                length: 10,
                lineStyle: {
                    width: 2,
                    color: '#999'
                }
            },
            axisLabel: {
                distance: 15,
                color: '#999',
                fontSize: 10
            },
            anchor: {
                show: true,
                showAbove: true,
                size: 25,
                itemStyle: {
                    borderWidth: 10
                }
            },
            title: {
                show: false
            },
            detail: {
                valueAnimation: true,
                fontSize: 30,
                offsetCenter: [0, '80%']
            },
            data: [
                {
                    value: 80
                }
            ]
        }
    ]
};

completion_rate.setOption(completionrateOption);


//=========得分率=======================
var qufenbu_data =echarts.init(document.getElementById("qufenbu_data"),'shine');
var qufenbuOption = {
    color: ['#FADB71'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        x:30,
        y:10,
        x2:15,
        y2:20
    },
    xAxis : [
        {
            type : 'category',
            data : ['题目一', '题目二', '题目三'],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
			color: "#FADB71" //刻度线标签颜色
			}
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel: {
			color: "#FADB71" //刻度线标签颜色
			}
        }
    ],
    series : [
        {
            name:'得分率',
            type:'bar',
            barWidth: '60%',
            data:[100, 100, 100]
        }
    ]
};
qufenbu_data.setOption(qufenbuOption);


//获取当前时间
var timer = setInterval(function () {
    var date = new Date();
    var year = date.getFullYear(); //当前年份
    var month = date.getMonth(); //当前月份
    var data = date.getDate(); //天
    var hours = date.getHours(); //小时
    var minute = date.getMinutes(); //分
    var second = date.getSeconds(); //秒
    var day = date.getDay(); //获取当前星期几
    var ampm = hours < 12 ? 'am' : 'pm';
    $('#time').html(fnW(hours) + ":" + fnW(minute) + ":" + fnW(second));
    $('#date').html('<span>' + year + '/' + (month + 1) + '/' + data + '</span><span>' + ampm + '</span><span>周' + day + '</span>')
}, 1000)

//3s请求刷新一次数据
window.setInterval(function () {
    refreshValueData();
    refreshChartsData();
},3000);


function refreshChartsData(){
    $.ajax({
        url:projectName+"/billboard/charts",
        data:{},
        type:"get",
        dataType: 'json',
        crossDomain: true,
        success:function (data) {
            if (!data.success) {
                alert(data.message);
                return;
            }
            //实时榜单
            var reallistOption = game_billboard.getOption();
            var yAxisTmp = billboardOption.yAxis;
            yAxisTmp.data = data.entity.reallist.name;
            reallistOption.yAxis = yAxisTmp;
            reallistOption.series[0].data = data.entity.reallist.value;
            game_billboard.setOption(reallistOption,true);

            //参赛人员分布
            var fenbuOption = pie_fanzui.getOption();
            var legend = fanzuioption.legend;
            legend.data = data.entity.fenbu.title;
            fenbuOption.legend = legend;
            fenbuOption.series[0].data = data.entity.fenbu.data;
            pie_fanzui.setOption(fenbuOption,true);

            //题目得分率
            var defenlvOption = qufenbu_data.getOption();
            defenlvOption.xAxis[0].data = data.entity.scorerate.title;
            defenlvOption.series[0].data = data.entity.scorerate.data;
            qufenbu_data.setOption(defenlvOption,true);

        },
        error:function () {
        }
    });
}


function refreshValueData(){
    $.ajax({
        url:projectName+"/billboard/value",
        data:{},
        type:"get",
        dataType: 'json',
        crossDomain: true,
        success:function (data) {
            if (!data.success) {
                alert(data.message);
                return;
            }
            var ranking_one = document.getElementById("ranking_one");
            var ranking_two = document.getElementById("ranking_two");
            var ranking_three = document.getElementById("ranking_three");
            ranking_one.innerText = data.entity.one;
            ranking_two.innerText = data.entity.two;
            ranking_three.innerText = data.entity.three;

            var duiwushu = document.getElementById("duiwushu");
            var shengyushijian = document.getElementById("shengyushijian");
            var ranking_three = document.getElementById("ranking_three");
            duiwushu.innerText = data.entity.duiwushu;
            shengyushijian.innerText = data.entity.shengyushijian;

            var completionrateOption = completion_rate.getOption();
            completionrateOption.series[0].data[0].value = data.entity.completionrate;
            completion_rate.setOption(completionrateOption,true);
        },
        error:function () {
        }
    });
}